<!-- page content -->
<div id="myVue" class="right_col" role="main" xmlns:v-model="http://www.w3.org/1999/xhtml">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h3>
                    Vue Index Page
                </h3>
            </div>
        </div>

        <div class="clearfix"></div>
        <p>============================</p>
        <h3>获取数据</h3>
        <p>name: {{user.name}}</p>
        <p>============================</p>
        <h3>单向绑定数据</h3>
        <input type="text" :value="user.name" />
        <p>============================</p>
        <h3>双向绑定数据</h3>
        <input type="text" v-model:value="user.name" />
        <input type="text" v-model="user.gender" />
        <p>============================</p>
        <h3>循环绑定数据</h3>
        <select>
            <option v-for="(city, index) in cities" :value="city.cityId">{{city.cityName}}</option>
        </select>
        <table>
            <thead>
            <tr>
                <td>id</td>
                <td>name</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(city, index) in cities">
                <td>{{city.cityId}}</td>
                <td>{{city.cityName}}</td>
            </tr>
            </tbody>
        </table>
        <p>============================</p>
        <h3>绑定事件</h3>
        <button @click="test_1()">test_1</button>
        <button id="test_2" price="22.33" @click="test_2($event)">test_2</button>
        <p>============================</p>
        <h3>自定义模版</h3>
        <button-demo></button-demo>
        <button-count></button-count>
    </div>
</div>
<!-- /page content -->

<script>
    $(function () {
        test_1();
    });

    Vue.component("button-demo", {
        template: "<button>button-demo</button>",
    });

    // 组件方式一
    Vue.component("button-count", {
        data: function () {
            return {
                count: 0,
            };
        },
        methods: {
            count_fun: function () {
                this.count += 1;
            },
        },
        template: "<button @click='count_fun()'>{{count}}</button>",
    });

    // .vue 组件
    var myVue = new Vue({
        el: "#myVue",
        data: {
            user: {
                name: "hujiang",
                age: 18,
                gender:"male"
            },
            cities: [{
                cityId:"1",
                cityName:"chengdu"
            },{
                cityId:"2",
                cityName:"wuhan"
            }]
        },
        methods: {
            test_1: function () {
                console.log(this.user);
            },
            test_2: function (event) {
                console.log(event);
                console.log(event.originalTarget);
                console.log(event.originalTarget.attributes.getNamedItem("price").name);
                console.log(event.originalTarget.attributes.getNamedItem("price").value);
            },
            initCities: function () {
                var countryId = 522;
                var self = this;
                $.ajax({
                    url: "/api/cities/" + countryId,
                    type: "get",
                    success: function (rs) {
                        self.cities = rs;
                    },
                    error: function (data) {
                        layer.alert(data.responseText, { icon: 0 });
                    },
                });
            },
        },
        // 将 Vue 函数赋值给 window 时，在此挂钩
        created: function () {
            window.test_1 = this.test_1;
        },
        // mounted 生命周期挂钩子 ---- 初始化页面函数的时候，在此处挂钩
        mounted: function () {
            // this.initCities();
        },
    });
</script>